<template>
	<view class="layout">
		<view class="title">添加题目</view>
		<view class="form">
			<view class="opt">
				<text class="label">一级分类:</text>
				<!-- 下拉组件 -->
				<view>
					<picker @change="categorysChange" :value="index" :range="array">
						<view class="uni-input">{{array[index]}}</view>
					</picker>
				</view>
			</view>

			<view class="opt">
				<text class="label">二级分类:</text>
				<!-- 下拉组件 -->
				<view>
					<picker @change="categorysChildChange" :value="num" :range="arr">
						<view class="uni-input">{{arr[num]}}</view>
					</picker>
				</view>
			</view>

			<view class="opt opt-1">
				<text class="label">题目:</text>
				<textarea v-model="textArea1" class="textarea textarea-2" placeholder="请输入题目"></textarea>
			</view>

			<view class="opt opt-1">
				<text class="label">答案解析:</text>
				<textarea v-model="textArea2" class="textarea" placeholder="请输入答案解析"></textarea>
			</view>

			<view class="opt">
				<!-- 点击选择文件 -->
				<view class="wrap"  @click="chooseFile">
					<view class="icon-box">
						<text class="uni-icons-cloud-upload-filled  icon"></text>
					</view>
					<view class="text-box">
						<text class="message">点击选择上传图片(可选)</text>
					</view>
					<view class="img-box" v-if="img">
						<image class="img" :src="img" mode="heightFix"></image>
						<!-- <view class="txt" @click.stop="removeImage(src)">删除</view> -->
					</view>
				</view>
			</view>

			<view class="opt">
				<text class="label">作者:</text>
				<input v-model="input" type="text" class="input" placeholder="请输入作者">
			</view>

			<view class="opt">
				<button class="button" @click="addTopic">发布题目</button>
			</view>

		</view>
	</view>
</template>

<script setup>
	
	// 组合式开发
	import {
		ref
	} from 'vue';
	// 导入云数据库的集合引用
	// @/  代表项目根路径  /topic_admin
	import {
		categorysChild,
		categorys,
		topics
	} from '@/common/db/index.js'


	// 定义变量 获取输入域、输入框的值
	const textArea1 = ref("");
	const textArea2 = ref("");
	const input = ref("");
	const img = ref(""); //渲染在页面上
	const src = ref("");
	
	// let  声明变量的关键字 ，变量的值是可变的
	// const  声明常量的关键字 ，常量的值是固定值，可以修改引用地址里面的值  地址.value
	
	let img_url = ""; // 把这个图片路径存储云数据
	let isImg = false; // 判断用户是否选择上传图片


	//索引值（一级分类）
	const index = ref(0);
	// 数组（一级分类）
	const array = ref([]);
	// 定义变量 记录分类名称（一级分类）
	let text = "";

	// 定义索引值（二级分类）
	const num = ref(0);
	// 数组（二级分类）
	const arr = ref([]);
	// 定义变量 记录分类名称（二级分类）
	let name = "";
	

	// 选择一级分类
	const categorysChange = (e) => {
		//赋值
		index.value = e.detail.value;
		console.log("一级菜单索引:", index.value)
		// 赋值给text 
		text = array.value[index.value];
		if (text) {
			// 获取一级分类对应的二级分类
			listCategorysChild(text);
		}

	}

	// 选择二级分类
	const categorysChildChange = (e) => {
		//赋值
		num.value = e.detail.value;
		// 赋值name 
		name = arr.value[num.value];
	}

	// 获取一级分类列表
	// ES6  Promise语法
	const listCategorys = async () => {
		await categorys.get().then(res => {
			// 获取查询的结果
			let result = res.result;
			// 检查数据
			// console.log(result.data);
			// ES6 数组API
			let newArr = result.data.map(item => item.text)
			// 赋值
			array.value = newArr;
			// 设置默认值
			text = newArr[0];
			// 二级菜单显示默认值
			listCategorysChild(text);
		}).catch(err => console.log(err))
	}

	// 获取二级分类列表
	const listCategorysChild = async (text) => {
		// console.log({text})
		// 查询对应的分类
		await categorysChild.where({
			text: text
		})
		.get().then(res => {
			// 获取查询的结果
			let result = res.result;
			// 检查数据
			// console.log(result.data);
			// ES6 数组API
			let newArr = result.data.map(item => item.name)
			// console.log(newArr);
			// 赋值
			arr.value = newArr;
			// 设置默认值
			name = newArr[0];
		}).catch(err => console.log(err))
	}


	
	// 编写方法把文件上传到云存储空间
	const uploadFile = async (filePath,ext='jpg') => {
		let filename = Math.random().toString().slice(2)+"_"+(new Date().getTime().toString().slice(-4))+"."+ext;
		// promise方式
		const result = await uniCloud.uploadFile({
			filePath: filePath,
			cloudPath: `${filename}`,
			onUploadProgress: function(progressEvent) {
			 //  console.log(progressEvent);
			 //  var percentCompleted = Math.round(
				// (progressEvent.loaded * 100) / progressEvent.total
			 //  );
			}
		});
		
		// console.log("上传图片结果:",result);
		if(result.success) {
			img_url = result.filePath;
			src.value = result.filePath;
			// console.log("图片路径:",img_url);
		}
	}

	// 编写选择文件的方法
	const chooseFile = () => {
		// 赋值为true
		isImg = true;
		// 选择图片文件
		if(uni.chooseFile){
			uni.chooseFile({
				count: 1,
				type: 'image',
				success(res) {
					console.log("文件信息:",res);
					// tempFilePath可以作为img标签的src属性显示图片
					// const tempFilePaths = res.tempFiles[0];
					const tempFilePaths = res.tempFilePaths[0];
					img.value = res.tempFilePaths[0];
					// 获取文件的后缀名
					// let str = res.tempFiles[0].name
					// if(str){
					// 	str = str.slice(str.lastIndexOf(".")+1)
					// 	console.log("后缀名:",str);
					// }
					// 上传文件到云存储空间 
					uploadFile(tempFilePaths);
				}
			})
		}
	}
	
	
	// 编写删除文件的方法
	// const removeImage = async (src) => {
	// 	// 客户端仅支持腾讯云，而我们当初选择的是阿里云，除非我们使用云函数操作删除云储存文件
	// 	await uniCloud
	// 	  .deleteFile({
	// 	    fileList: [src]
	// 	  })
	// 	  .then(res => {
	// 		   console.log("删除结果",res);
	// 		   img.value = "";
	// 	  });
	// }


	// 点击添加按钮 发布题目
	const addTopic = async () => {
		let question = textArea1.value;
		let answer = textArea2.value;
		let author = input.value;
		// console.log({question,answer,author,text:text,name:name,img_url:img_url})
		if (text == "" || name == "" || question == "" || answer == "" || author == "") {
			uni.showToast({
				title: "缺少参数，请重新提交",
				icon: "none"
			})
			return false;
		}
		// 获取当前的时间戳
		let update_time = new Date().getTime();
		
		// 如果用户有想法，要上传图片
		if(isImg) {
			console.log("img_url：",img_url)
			if(img_url) {
				// 设置布尔值为true
				isImg = false;
				// 发布题目 (有图片)
				await topics.add({update_time, question,answer,author,text:text,name:name,img_url:img_url})
				.then(
					res=> {
						let result = res.result;
						console.log(2,result)
						if(result.errCode == 0) {
							uni.showToast({
								title:"发布成功(图片)",
								icon:"success"
							})
							setTimeout(()=>{
								uni.redirectTo({
									url:'/pages/topic/list_topic/list_topic'
								})
							},300)
						}
					}
				)
				.catch(err=> console.log(err))
				// 关闭 选择图片的操作
				isImg = false;
			}
			else {
				uni.showToast({
					title: "请等一等，在提交",
					icon:'none'
				})
			}
		}
		else {
			// 发布题目(没有图片的)
			await topics.add({update_time, question,answer,author,text:text,name:name})
			.then(
				res=> {
					let result = res.result;
					console.log(1,result)
					if(result.errCode == 0) {
						uni.showToast({
							title:"发布题目成功",
							icon:"success"
						})
						
						setTimeout(()=>{
							uni.redirectTo({
								url:'/pages/topic/list_topic/list_topic'
							})
						},300)
					}
				}
			)
			.catch(err=> console.log(err))
		}
	}
	// 初始化
	listCategorys();
</script>

<style lang="scss">
	@import "../topic.scss";
</style>